<template>
  <!-- 地貌设定 -->
  <div class="app-container">
    <!-- 搜索查询 -->
    <div class="form-container">
      <el-form ref="queryForm" :inline="true" label-width="80px" :model="filters">
        <el-form-item label="地区名称" prop="merName">
          <el-input v-model="filters.merName" clearable placeholder="请输入地区名称" size="small" />
        </el-form-item>
      </el-form>
    </div>
    <!--操作按钮-->
    <div class="btns-group">
      <el-button v-clickForbidden icon="el-icon-search" size="middle" @click="handleQuery">搜索</el-button>
      <el-button v-clickForbidden icon="el-icon-refresh" size="middle" @click="resetQuery">重置</el-button>
      <el-button v-hasPermi="['supervise:regionalConfig:list']" icon="el-icon-plus" size="middle" :disabled="single" @click="handleAdd">配置地貌</el-button>
    </div>
    <!-- 表格展示start -->
    <div ref="table">
      <el-table
        ref="multipleTable"
        class="table-list"
        stripe
        :class="highLevelSet===true ? (needTagsView===true ? 'el-body-page-roll-tag-height-tree' : 'el-body-page-roll-height-tree') :
          (needTagsView===true ? 'el-body-page-roll-tag-tree' : 'el-body-page-roll-tree')"
        :data="treeData"
        :row-style="rowClass"
        row-key="value"
        :header-cell-class-name="cellClass"
        :default-expand-all="true"
        :select-all="handleSelectAll"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        @selection-change="handleSelectionChange"
        @row-click="rowChecked"
      >
        <el-table-column type="selection" align="center" width="38" />
        <el-table-column prop="label" header-align="center" label="地区" min-width="300" />
        <el-table-column prop="label" :formatter="fortmatterType" align="center" label="地貌类型" min-width="300" />
      </el-table>
    </div>
    <!-- 表格展示end-->
    <!-- 新增弹窗 -->
    <addDialog ref="addDialog" />
    <!-- 详情弹框 -->
    <detailDialog ref="detailDialog" />
  </div>
</template>

<script>
import { getRegionalTypeListNo } from '@/api/superviseBaseInfo/regionalSettings'
// 获取地区树
import { listRegionTree } from '@/api/common/area.js'
// 新增弹框
import addDialog from './components/addDialog'
import detailDialog from './components/detailDialog'
import { mapState } from 'vuex'
export default {
  name: 'RegionalSettings',
  components: {
    addDialog,
    detailDialog
  },
  data() {
    return {
      // 地区数组
      cityOptions: [],
      // 筛选条件
      highLevelSet: false, // 高级设置显示隐藏
      filters: {
        merName: '河北省' // 类型名称
      },
      /* 列表 start*/
      total: 0, // 分页总条数
      selectRow: [], // 高亮样式
      multipleSelection: [], // 选中表格行
      loading: false, // 列表加载
      treeData: [], // 表格数据
      typeList: []
      /* 列表 end*/
    }
  },
  computed: {
    ...mapState({
      needTagsView: (state) => state.settings.tagsView
    }),
    single() {
      return this.multipleSelection.length === 0
    }
  },
  created() {
    // 获取区域树
    this.getList()
    this.getTypeList()
  },
  methods: {
    fortmatterType(row) {
      const item = this.typeList.find(item => item.id === row.regionTypeId)
      return item && item.typeName
    },
    // 获取地貌列表
    async getTypeList() {
      const { data: { rows }} = await getRegionalTypeListNo()
      this.typeList = rows.map(item => ({
        typeName: item.typeName,
        id: item.id
      }))
    },
    // 获取区域树
    async getList() {
      this.loading = true
      try {
        const { data } = await listRegionTree(this.filters)
        if (data) {
          this.treeData = data
          this.total = data.length || 0
          // this.AddTaleData(data, this.total)
          this.loading = false
        }
      } catch {
        this.loading = false
      }
    },
    // 空白行添加
    AddTaleData(arr, num) {
      const tableHeight = this.$refs.table.offsetHeight
      const row = Math.floor(
        (tableHeight - 36) / 36 // 表格：表头/行高：36px
      )
      for (let i = 0; i < (row - num); i++) {
        this.treeData.push({})
      }
    },
    /* 表格选中事件 start */
    cellClass(row) {
      return row.columnIndex === 0 && 'DisableSelection'
    },
    rowChecked(row) {
      const selectData = this.multipleSelection

      if (Object.prototype.hasOwnProperty.call(row, 'children')) {
        this.msgWarning('请选择区/县及城市配置地貌!')
        return
      } else {
        // 是否为选中的状态
        const isHas = selectData.some(item => item === row)
        this.$refs.multipleTable.toggleRowSelection(row, !isHas)
      }
    },
    // 全选按钮触发事件
    handleSelectAll(selection) {
      console.log(selection)
    },
    // 点击表格前面选框时触发的事件
    handleSelectionChange(val) {
      this.selectRow = []
      if (val.length) {
        const newSelect = val[val.length - 1]
        // 检查是否为区县城市
        const isChild = Object.prototype.hasOwnProperty.call(newSelect, 'children')
        if (isChild) {
          this.msgWarning('请选择区/县及城市配置地貌!')
          const removeRow = val.pop()
          this.$refs.multipleTable.toggleRowSelection(removeRow, false)
        }
      }

      this.multipleSelection = val
      if (this.multipleSelection.length > 0) {
        this.multipleSelection.forEach((item, index) => {
          this.selectRow.push(this.treeData.indexOf(item))
        })
      }
    },
    // 高亮样式
    rowClass({ row, rowIndex }) {
      if (this.selectRow.includes(rowIndex)) {
        return { 'background-color': 'rgba(185,221,249,.75)' }
      }
    },
    /* 表格选中事件 end */

    /* 按钮 start */
    // 搜索方法
    handleQuery() {
      this.filters.pageNum = 1
      this.getList()
    },
    // 重置搜索
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 新增
    handleAdd() {
      this.$refs.addDialog.handleAdd('地貌配置', this.multipleSelection)
    }
    /* 按钮 end */
  }
}
</script>

<style scoped lang="scss">
</style>

